<template>
  <ApproveWrapper>
    <template v-slot:header v-if="isNotEmpty(processInstance)">
      <ProcessTitleDetailHeader :processInstance="processInstance"/>
    </template>

    <template v-slot:body>
      <DefaultFormRender :pageAction="pageAction" :formDefinition="formDefinition" :viewAction="viewAction"
                         ref="refDefaultFormRender" :view="view" :components="components"/>

      <FSection title="相关附件" v-show="isNotEmpty(formFlowDesc)
      && isNotEmpty(formFlowDesc.attachmentIds)"
                :style="{width: (view.width + 40) + 'px'}"
                class="start-process-content-section">
        <FUploader ref="refFUploader" :enable="false"/>
      </FSection>

      <FSection title="附言" :style="{width: (view.width + 40) + 'px'}"
                class="start-process-content-section">
        <el-text>
          <div v-html="formFlowDesc.additionalComments">
          </div>
        </el-text>
      </FSection>

    </template>
  </ApproveWrapper>
</template>
<script setup>
import {shallowRef, unref, watchEffect} from 'vue';
import ApproveWrapper from '@/components/platwork/FormApproveComponent/ApproveWrapper.vue';
import ProcessTitleDetailHeader from '@/components/platwork/FormApproveComponent/ProcessTitleDetailHeader.vue';
import DefaultFormRender
  from '@/components/platwork/FormDetailComponent/DefaultFormDetailComponent/DefaultFormRender.vue';
import {DefaultViewAction, DefaultViewDefinition} from '@/components/form/DefaultFormDefinition';
import {getAction} from '@/request/BaseRequest';
import {isEmpty, isNotEmpty} from '@/utils/CommonUtils';
import FUploader from '@/components/FUploader/index.vue';
import FSection from '@/components/FSection/index.vue';

const pageAction = shallowRef('static');
const formDefinition = shallowRef({
  form: {},
  formFields: [],
  subForms: [{
    fields: [],
    subForm: {}
  }]
});
const viewAction = shallowRef(DefaultViewAction);
const view = shallowRef(DefaultViewDefinition);
const components = shallowRef([]);
const refDefaultFormRender = shallowRef();
const processInstance = shallowRef();
const refFUploader = shallowRef();
const formFlowDesc = shallowRef({});

defineOptions({
  name: 'DefaultFormDetailComponent'
});

const props = defineProps({
  dataId: undefined,
  viewId: undefined,
});

watchEffect(() => {
  loadDatas();
});

function parseFormDefinition(_formDefinition) {
  let data = {};
  data.form = _formDefinition;
  data.formFields = _formDefinition.fields;
  data.subForms = _formDefinition.subForms;
  let tempSubForms = [];
  if (isNotEmpty(_formDefinition.subForms)) {
    _formDefinition.subForms.forEach(subForm => {
      tempSubForms.push({
        fields: subForm.fields,
        subForm
      });
    });
  }
  data.subForms = tempSubForms;
  data.formRelationVos = _formDefinition.formRelationVos;

  formDefinition.value = data;
  refDefaultFormRender.value.setFormDefinition(data);
}

function loadDatas() {
  loadViewForm(props.viewId).then(_formDefinition => {
    parseFormDefinition(_formDefinition);
    resolveFormDefinition(_formDefinition);

    loadFormData().then(formDataVo => {
      setFormData(formDataVo);
    });
  });
}

function setFormData(formDataVo) {
  refDefaultFormRender.value.setFormData(formDataVo.formData);
  loadFormProcessInstance(formDataVo.formData);
  formFlowDesc.value = formDataVo.formFlowDesc;
  refFUploader.value.setData(formDataVo.formFlowDesc.attachmentIds);
}

function loadFormProcessInstance(formData) {
  let processInstanceId = formData.process_instance_id;
  if (isEmpty(processInstanceId)) {
    processInstance.value = undefined;
    return;
  }

  getAction('/flow/loadProcessInstanceById', {processInstanceId}).then(data => {
    if (data.success) {
      let result = data.result;
      processInstance.value = result;
    }
  })
}

function loadFormData() {
  return new Promise((success, err) => {
    let id = props.dataId;
    let formId = formDefinition.value.form.id;

    getAction('/plat/loadFormDataById', {id, formId}).then(data => {
      if (data.success) {
        let result = data.result;
        success(result);
      }
    });
  });
}

function resolveFormDefinition(formDefinition) {
  let definition = unref(formDefinition);
  view.value = definition.views[0];
  let v = unref(view);

  let temp = JSON.parse(v.viewDefinition);
  components.value = temp.children;
}

function loadViewForm(viewId) {
  return new Promise((success, err) => {
    getAction('/plat/loadViewFormDefinitionPublished', {viewId}).then(data => {
      if (data.success) {
        let result = data.result;
        success(result);
      }
    });
  });
}
</script>
